@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-scroll';

$orientations: 'vertical', 'horizontal';
$sizes: 's', 'm';

.scroll {
  position: relative;
  z-index: 0;

  box-sizing: border-box;
  width: 100%;
  height: 100%;
}

$theme-name: osThemeSnack;
$scrollbar-slider-active-zone: 12px;

/**
 * Темизация overlay-scrollbars использует селекторы из этого шаблона
 * https://kingsora.github.io/OverlayScrollbars/v1/#!documentation/styling
 */
/* stylelint-disable-next-line selector-pseudo-class-no-unknown */
:global {
  .#{$theme-name} .os-scrollbar {
    padding: 0;
  }

  @each $orientation in $orientations {
    .#{$theme-name}[data-untouchable-scrollbars] > .os-scrollbar-#{$orientation} {
      pointer-events: none;
      > .os-scrollbar-track {
        pointer-events: none;
        > .os-scrollbar-handle {
          pointer-events: none;
        }
      }
    }
  }

  @each $size in $sizes {
    @each $orientation in $orientations {
      .#{$theme-name}[data-size='#{$size}'] > .os-scrollbar-#{$orientation} {
        @include composite-var($scroll, 'container', $orientation, $size);

        pointer-events: none;
        overflow: hidden;
      }
      .#{$theme-name}[data-size='#{$size}']
        > .os-scrollbar-#{$orientation}
        > .os-scrollbar-track
        > .os-scrollbar-handle {
        @include composite-var($scroll, 'slider', $orientation, $size);
      }
    }

    .#{$theme-name}[data-size='#{$size}'].os-host-resize-disabled > .os-scrollbar-horizontal {
      right: simple-var($theme-variables, 'size', 'scroll', 'track', $size);
    }

    .#{$theme-name}[data-size='#{$size}'].os-host-resize-disabled.os-host-rtl > .os-scrollbar-horizontal {
      right: 0;
      left: simple-var($theme-variables, 'size', 'scroll', 'track', $size);
    }

    .#{$theme-name}[data-size='#{$size}'].os-host-resize-disabled > .os-scrollbar-vertical {
      bottom: simple-var($theme-variables, 'size', 'scroll', 'track', $size);
    }

    .#{$theme-name}[data-size='#{$size}'] > .os-scrollbar-horizontal {
      right: simple-var($theme-variables, 'size', 'scroll', 'button-resize');
    }

    .#{$theme-name}[data-size='#{$size}'].os-host-rtl > .os-scrollbar-horizontal {
      right: 0;
      left: simple-var($theme-variables, 'size', 'scroll', 'button-resize');
    }

    .#{$theme-name}[data-size='#{$size}'] > .os-scrollbar-vertical {
      bottom: simple-var($theme-variables, 'size', 'scroll', 'button-resize');
    }
  }

  @each $orientation in $orientations {
    .#{$theme-name} > .os-scrollbar-#{$orientation} > .os-scrollbar-track > .os-scrollbar-handle {
      opacity: simple-var($theme-variables, 'opacity', 'a032');
      background-color: simple-var($theme-variables, 'sys', 'neutral', 'accent-default');

      &.active,
      &:hover {
        opacity: simple-var($theme-variables, 'opacity', 'a064');
        background-color: simple-var($theme-variables, 'sys', 'neutral', 'accent-default');
      }
    }
  }

  .#{$theme-name} > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle {
    left: 50%;
    translate: -50%;

    &::before {
      right: -$scrollbar-slider-active-zone;
      left: -$scrollbar-slider-active-zone;
    }
  }

  .#{$theme-name} > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle {
    top: 50%;
    translate: 0 -50%;

    &::before {
      top: -$scrollbar-slider-active-zone;
      bottom: -$scrollbar-slider-active-zone;
    }
  }

  .#{$theme-name} > .os-scrollbar-corner {
    --bg-icon-mask: url();

    @include composite-var($scroll, 'button-resize', 'container', 'single');

    z-index: 0;

    background-color: simple-var($theme-variables, 'sys', 'neutral', 'text-disabled');
    background-image: unset;

    -webkit-mask-image: var(--bg-icon-mask);
    mask-image: var(--bg-icon-mask);

    &:hover {
      background-color: $sys-neutral-text-support;
    }
  }

  .os-dragging .#{$theme-name} > .os-scrollbar-corner:hover {
    background-color: simple-var($theme-variables, 'sys', 'primary', 'accent-default');
  }

  .#{$theme-name}.os-host-resize-disabled > .os-scrollbar-corner {
    display: none;
  }
}
